<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title></title>
	</head>
	<style>
		h1,
		div,
		body,
		fieldset,
		legend,
		h1,
		h2,
		input {
			padding: 0px;
			margin: 0px;
		}

		h1 {
			text-align: center;
		}

		.warning {
			display: block;
			width: 400px;
			height: fit-content;
			color: red;
			text-align: center;
			margin: 5px 0px;
		}


		form>fieldset {
			margin-top: 20px;
			border: 3px solid black;
			width: fit-content;
			height: auto;
			margin-left: auto;
			margin-right: auto;
			font-size: 16px;
			padding: 10px;

		}

		input:not(input:last-child) {
			width: 400px;
			border: 1px solid blue;
			font-size: 16px;
			margin-bottom: 5px;
			padding: 5px 0px;
			display: block;
		}

		input:last-child {
			margin-top: 10px;
			margin-left: auto;
			margin-right: auto;
			display: block;
			width: 100px;
		}

		#create_window {}
	</style>
	<body>

		<form>
			<fieldset id="input_Area">
				<legend>
					<h1>输入框</h1>
				</legend>
				<input required type="text" placeholder="输入用户名">
				<input required type="text" placeholder="密码">
				<input required type="text" placeholder="邮箱">
				<input type="submit" id="sub" / value="提交">
			</fieldset>
		</form>

	</body>
	<script>
		const fieldset = document.getElementById("input_Area")
		const input_List = document.querySelectorAll("input[type=text]")
		const sub = document.getElementById("sub") //
		sub.onclick = submitting;
		// 1、动态表单验证?
		// 题目：模拟一个用户注册表单，包含用户名（必填，长度至少 6 位）
		// 、密码（必填，包含字母和数字，长度 8 - 20 位）、邮箱（必填，符合邮箱格式）字段。
		// 使用 DOM 操作，当用户点击提交按钮时，验证每个字段的输入是否符合要求。若不符合，
		//在对应的输入框下方显示错误提示；若全部符合，弹出 “注册成功” 提示框，并清空表单内容
		// 提示：通过document.getElementById获取表单元素，使用正则表达式进行格式验证，
		// 利用createElement和appendChild动态创建并添加错误提示元素。?

		function addWaring(obj, num, flag) { //flag判断要不要去除错误信息
			var last_warn = document.querySelector("#warn" + num); //没有返回null
			if (flag == true) { //删除错误信息
				last_warn != null ? last_warn.remove() : 0
				return 1;
			}
			if (last_warn != null) { //如果有错误信息,不删除
				return 0;
			} else {
				var warningText = document.createElement("div")
				warningText.innerText = "不符合输入要求"
				warningText.id = "warn" + num;
				warningText.className = "warning";
				fieldset.insertBefore(warningText, obj.nextSibling)

			}
		}

		function createSuccess() {
			alert("注册成功")
		}

		function checking(arr, reg) {
			var flag = true;

			for (var x = 0; x < arr.length; x++) {

				if (reg[x].test(arr[x].value) == false) {
					flag = false;
					addWaring(arr[x], x + 1, false)
				} else {
					addWaring(arr[x], x + 1, true)
				}
			}
			if (flag) {
				createSuccess();
				return 1;
			}
			event.preventDefault();
			return 0;
		}

		function submitting(event) {
			var regList = [/^(\w){6,}$/g, /^(\w){8,20}$/g, /^(\w)+(\@){1}([a-z]|[0-9])+(\.){1}([a-z]){2,3}$/g]
			var arr = [input_List[0], input_List[1], input_List[2]];
			checking(arr, regList)
			return 0;


		}
	</script>
</html>